<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>
</title>
<link href="layui/css/layui.css" rel="stylesheet"
	type="text/css" />
<script src="layui/layui.js"></script>
<script src="echarts.js"></script>
<script src="jquery-1.8.2.js"></script>
</head>
<body>
	<!-- 表单搜索-->
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">时间区间</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="min" id="min" placeholder="开始时间"
					autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid">-</div>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="max" id="max" placeholder="结束时间"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<input type="button" class="layui-btn" id="souBtn" value="搜索" />
	</div>
	<!-- 表单搜索结束 -->
	
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 600px; height: 400px;"></div>
	
	<!-- 脚本代码部分 -->
	<script type="text/javascript">
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			var $ = layui.$;
			
			
			//执行一个laydate实例
			laydate.render({
				elem : '#min' //指定元素
			});
			laydate.render({
				elem : '#max' //指定元素
			});
			

			
		
			
			
			
			//定义函数
			var active = {
				qingqiu:function(){
					//ajax异步请求服务端 获取 图表的数据
					$.get("getStatistic", {
						"min" : $("#min").val(),
						"max" : $("#max").val()
					}, function(res) {
						active.tubiao(res.xData,res.yData);  
					});
				},
				tubiao : function(xData,yData) {
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main'));
					// 指定图表的配置项和数据
					var option = {
						title : {
							text : '第一个 ECharts 实例'
						},
						tooltip : {},
						legend : {
							data : [ '人次' ]
						},
						xAxis : {
							//type:'category'
							data : xData //x轴的数据
						},
						yAxis : {},
						series : [ {
							name : '人次',
							type : 'bar',
							data : yData //y轴的数据
						} ]
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			};//定义函数---end

			
			//调用函数中的请求
			active.qingqiu();
			
			
			//点击事件
			$("#souBtn").click(function(){
				active.qingqiu();
			});

		});
		</script>
</body>
</html>
